<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册登录界面</title>
	<link rel="stylesheet" href="../css/login.css">
</head>
<body>
	<div class="container" id="container">
		<div class="form-container sign-up-container">
			<!-- 注册 -->
			<form action="#">
				<h1>用户注册</h1>
				<div class="avatar-section">
				    <div class="avatar-preview" id="avatarPreview">
				        <p>👤</p>
				    </div>
				    <label for="avatarUpload" class="upload-btn">选择头像(小于1MB)</label>
				    <input type="file" id="avatarUpload" class="avatar-upload" accept="image/*">
				</div>
				<span>
				请设置用户名、密码以注册一个新的账号
				</span>
				<input type="text" id="reg_username" placeholder="用户名" required>
				<input type="password" id="reg_password" placeholder="密码" required>
				<input type="email" id="email" placeholder="邮箱" required>
				<button id="send_code">发送验证码</button>
				<input type="text" placeholder="验证码" required>
				<button type="submit">注册</button>
			</form>
		</div>
		<div class="form-container sign-in-container">
			<!-- 登录 -->
			<form action="#">
				<h1>用户登录</h1>
				<span>
					请输入您的用户名、密码以登录您的账号
				</span>
				<input type="text" id="login_username" placeholder="用户名" required>
				<input type="password" id="login_password" placeholder="密码" required>
				<a href="#">忘记密码?</a>
				<button type="submit">登录</button>
			</form>
		</div>
		<!-- 侧边栏内容 -->
		<div class="overlay-container">
			<div class="overlay">
				<div class="overlay-panel overlay-left">
					<h1>已有账号？</h1>
					<p>去登入账号进入游戏吧</p>
					<button id="switch-signin">登录</button>
				</div>
				<div class="overlay-panel overlay-right">
					<h1>没有账号？</h1>
					<p>快去注册一个属于自己的账号吧</p>
					<button id="switch-signup">注册</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="../js/login.js"></script>
</html>